<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
  .ibox-content .form-group{
      margin-right: 0;
      margin-left: 0;
    }
  .ibox-content .form-group .col-sm-8 p{
      margin-bottom: 6px;
  }
  #oneLevelUpdateCom,#oneLevelUpdateCom1,#oneLevelUpdateCom2{
      display: none;
  }

  .description{
      font-size: 14px;
      color: #666;
      line-height: 25px;
  }

  .iconclose img{
      width: 100%;
  }

  .contactBox{
      display: table;
      margin-bottom: 10px;
      padding-left: 20px;
      width: 100%;
  }
  .demoMore{
      width: 200px;
      height: 135px;
      border: 1px solid #CFDDE6;
      border-radius: 4px;
      cursor: pointer;
      float: left;
  }

  .liveText{
      margin: 28px auto 0;
      text-align: center;
  }

  .picture,.video{
      width: calc(100% - 216px);
      height: 135px;
      margin-left: 16px;
      float: left;
      display: table;
  }
  .closeBtn{height: 135px;margin-right: 10px;margin-bottom: 10px;float: left}
  .liveText img{
      width: 50px;
      display: inline-block;
  }

  .liveText p{
      margin-top: 16px;
      font-size: 14px;
      color: #AEB4C5;
      text-align: center;
  }
  .picture img{object-fit: scale-down}
  .picture img,.video video{height: 100% !important;}
  .col-sm-12{
      background-color: #F3F6FB !important;
      box-shadow:none !important;
  }
  .exam-name{
      background-color: #E2F4FF !important;
      margin-bottom: 0;
      padding: 6px 24px !important;
      font-size: 18px;
      color: #040404;
      font-weight: bold;
      margin-bottom: 16px;
      box-shadow: 0px 3px 6px 1px rgba(181,197,223,0.1);
  }
  @media (min-width: 768px){
      .pop-dafen {
          width: 38% !important;
      }
  }
  .pop-dafen{
      border-radius: 4px;
  }
  .form-title{
      border-bottom: 1px solid #DFEAF1;
  }
  .listBox li {
      cursor: pointer;
      text-align: center;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-right: 11px;
      margin-bottom: 16px;
      float: left;
      padding: 0 !important;
      box-sizing: border-box;
      width: 32px;
      height: 32px;
      text-align: center;
      line-height: 32px;
  }
  .listBox li a{
      width: 32px;
      height: 32px;
      text-align: center;
      line-height: 32px;
  }
  .gray-bg .btn {
      width: 120px;
  }
  .fixedList{
      height: 620px;
      overflow: auto;
      padding: 17px 0px 37px 0px;
      border-right: 4px;
      box-shadow: 0px 3px 6px 1px rgba(181,197,223,0.1);
      margin-bottom: 20px;
  }
  .fixedList p{
      padding-bottom: 17px;
      border-bottom: 1px dashed #AEB4C5;
      position: relative;
      padding-left: 24px;
  }
  .fixedList p:after{
      content: '';
      position: absolute;
      width: 4px;
      height: 16px;
      background: #5AAEDF;
      left: 0;
      top: 0;
  }
  .listBox li{
      border-radius: 4px;
      border: 1px solid #AEB4C5;
      font-size: 13px;
  }
  .listBox  .selected {
      background: #5AAEDF;
      border: 1px solid #5AAEDF;
  }
  .listBox li:hover {
      background: #5AAEDF;
  }
  .listBox .selected a:focus{
      color: #fff;
  }
  #topicList{
      background: #fff;
      padding-bottom: 20px;
  }
  .wrapper-content .col-sm-12{
      padding: 0;
  }
  .listBox{
      margin-top: 17px;
      padding: 0 24px;
  }
  .userList .caption{
      font-size: 16px;
      color: #2F364A;
  }
  #topicList .userList{
      border-bottom: 1px dashed #AEB4C5;
  }
  #topicList .userList:last-of-type{
      border-bottom: 0;
  }
  .userList .answer .description{
      font-size: 14px;
      color: #676E82;
      margin-bottom: 14px;
  }
  .serialName{
      display: inline-block;
      color: #fff;
      margin-right: 12px;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      background: #5AAEDF;
      border-radius: 2px;
  }
  .pagination {
      display: inline-block;
      margin: 20px 0;
      border-radius: 4px;
      text-align: center;
      width: 100%;
      padding: 0 24px;
  }

  .tableHeader{
      width: 100%;
      height: 45px;
      text-align: center;
      background: #f1f1f1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      box-sizing: border-box;
  }
  .tableHeader p{
      flex: 1;
  }
  .userList{display: flex;justify-content: space-between;align-items: center;}
  .description,.rules,.scoreBox,.answer{
      flex: 1;
      text-align: center;
      margin-bottom: 0;
  }
  .tableHeader .module,.description{
      flex: 0 0 200px !important;
  }

  .userList{display: flex;justify-content: space-between;align-items: center;
      width: 100%;
      background: #fff;
      float: left;
      margin-right: 2%;
      padding: 15px;
      box-sizing: border-box;border-bottom: 1px dashed #AEB4C5;}
  .description,.rules,.scoreBox,.answer{
      flex: 1;
      text-align: center;
      margin-bottom: 0;
  }
  .scoreBox{
      flex: 0 0 100px !important;
  }
  .answer input{width: 80%;margin: 0 auto;}
  .rules{text-align: left;}
  .total{
      display: block;
      line-height: 45px;
      padding: 0 20px;
  }
  .remark{
      padding:0 20px;
      line-height: 30px;
      box-sizing: border-box;
      margin-bottom: 20px;
  }

  .subject{
      font-size: 16px;
      padding: 20px 0 0 20px;
      font-weight: 550;
  }
  .subjectContent{
      font-size: 12px;
      padding: 10px 0 10px 20px;
      color: #999;
  }
    .umpires{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 40px;
        margin-bottom: 10px;
    }
  .umpires span{
      margin-right: 20px;
      cursor:pointer;
      font-size: 14px;
  }
  .unactive{
      border-bottom: 2px solid #0d78fc;
      font-size: 16px;
  }
  .scroller{
      width: 300px;
      display: inline-block;
  }
  .scroller input{
      width: 200px;
      height: 35px;
      padding-left: 20px;
  }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content ">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <div class="umpires"></div>
                        <div id="b"></div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script src="//s.xlongwei.com/res/js/My97DatePicker/WdatePicker.js"></script>
<script>

    $(function (){
        let updateScore = JSON.parse( sessionStorage.getItem('row') )
        $.ajax({
            cache : true,
            type : "get",
            url : "/jzweb/mark/selEditData",
            data : {
                competition:updateScore.court,
                cbatchId:updateScore.cbatchId,
                signId:updateScore.signId,
                competitionName:updateScore.competitionName,
                ebatchId:updateScore.markVO[0].ebatchId
            },// 你的formid
            async : false,
            error : function(request) {
                parent.layer.alert("Connection error");
            },
            success : function(data) {
                if (data.code == 0) {

                    let str = '' , newuserName = '', raceIdStr = '';

                    data.data?.forEach(function (v,k){

                        let totalScore = 0;
                        newuserName+=`<span class="${k == 0? 'unactive':''}" data-index="${k}">${v.username}</span>`;

                        if( k == 0 ) str += `<div class="tableHeader"><p class="module">细则模块</p><p>具体细则</p><p class="scoreBox">分值</p></div>`;
                        str+=`<div style="${k == 0 ? '':'display:none'}" class="templetList">`;

                        v.markVO?.map(function (item,key){
                            totalScore += parseInt(item.score);
                            str += `
							<div class="userList">
						        <input value="${item.jinzhuanTopicId}" type="hidden" class="topicId">

								<div class="description">${item.contentName}</div>
								<div class="rules">
									${item.detailContent}
								</div>
								<div class="scoreBox">${item.contentScore}</div>

					            <input type="hidden" class="contentId" value="${item.contentId}">
                                <input type="hidden" class="ebatchId" value="${item.ebatchId}">
                                <input type="hidden" class="raceId" value="${item.raceId}">

							</div>
						`;

                        })
                        // if( k == 0 ){
                        str += `
                            <div class="total">
                                <p class="scroller">
                                    您的打分：<input type="text" placeholder="请在此输入您的打分" value="${v.refereeScore}">
                                </p>
                            </div>

                            <div class="remark">
                                <p>备注：</p>
                                <textarea class="form-control" placeholder="请输入你的备注" id="refereeRemark${k}">${v.refereeRemark}</textarea>
                            </div>

                            <div class="form-group" id="amend">
                                <div class="col-sm-4 col-sm-offset-4">
                                    <button type="button" onclick="update(this)" data-refereeId="${v.refereeId}" data-key="${k}" class="btn btn-primary btn-block">修改</button>
                                </div>
                            </div>

						</div>
						</div>
					`
                    })
                    $("#b").html(str)
                    $(".umpires").html(newuserName);

                    $(".umpires").find('span').click(function (){
                        $(".umpires").find('span').removeClass('unactive');
                        $(this).addClass('unactive');
                        $(".templetList").hide();
                        $(".templetList").eq($(this).index()).show();
                    })

                } else {
                    parent.layer.alert(data.msg)
                }

            }
        });
    })


    function update(that) {
        let updateScore = JSON.parse( sessionStorage.getItem('row') )

        let obj = []
        // if( type == 1 ){
        let index = parseInt($(".unactive").attr('data-index'));
        let key = $(that).attr('data-key');

        obj.push({
            raceId: $('.raceId').val(),
            competition: updateScore.court,
            ebatchId: $('.ebatchId').val(),
            jinzhuanTopicId: $('.topicId').val(),
            signId: updateScore.signId,
            updateScore: $(".scroller").find('input').eq(key).val(),
            cbatchId: updateScore.cbatchId,
            refereeId: $(that).attr('data-refereeid'),
            refereeRemark: $("#refereeRemark"+key ).val(),
        })

        let markDO = {
            markDO: obj
        };

        $.ajax({
            cache : true,
            type : "post",
            url : '/jzweb/mark/conservatorJudgeMark',
            data : JSON.stringify(markDO),// 你的formid
            contentType: 'application/json',
            async : false,
            error : function(request) {
                parent.layer.alert("Connection error");
            },
            success : function(data) {
                if (data.code == 0) {
                    layer.closeAll();
                    layer.msg('修改成功');
                    var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                    parent.layer.close(index);
                    parent.reLoad();
                } else {
                    parent.layer.alert(data.msg)
                    layer.closeAll();
                }
            }
        });
    }

</script>
</body>
</html>
